<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Along</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="echarts" src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script>
        var map = L.map('map').setView([40, 116], 9);
        var layer;
        var busLines;

        initMap();

        updateView();

        function initMap() {
            L.tileLayer('https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
                    attribution: '<a href="#">MapGIS</a>',
                    maxZoom: 18,
                    id: 'mapbox.light'
                }).addTo(map);
        }

        function updateView() {
            $.get('../../static/data/echarts/line-bus.json', function (data) {
                busLines = [].concat.apply([], data.map(function (busLine, idx) {
                    var prevPt;
                    var points = [];
                    for (var i = 0; i < busLine.length; i += 2) {
                        var pt = [busLine[i], busLine[i + 1]];
                        if (i > 0) {
                            pt = [
                                prevPt[0] + pt[0],
                                prevPt[1] + pt[1]
                            ];
                        }
                        prevPt = pt;

                        points.push([pt[0] / 1e4, pt[1] / 1e4]);
                    }
                    return {
                        coords: points
                    };
                }));
                var option = {
                    series: [{
                        type: 'lines',
                        coordinateSystem: 'leaflet',
                        polyline: true,
                        data: busLines,
                        silent: true,
                        lineStyle: {
                            normal: {
                                color: '#c23531',
                                color: 'rgb(200, 35, 45)',
                                opacity: 0.2,
                                width: 1
                            }
                        },
                        progressiveThreshold: 500,
                        progressive: 200
                    }]
                }
                layer = L.zondy.EchartsLayer(map, option).addTo(map);
            });
        }
    </script>

</body>

</html>